<!--
 * @Description: 源订单表单页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-18 18:36:51
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-04-22 20:37:41
 -->
<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增服务订单' : '编辑服务订单'" width="800px" style="text-align:left;">
    <el-form ref="form" :model="form" :rules="formRules" label-position="left" label-width="110px" style="width: 95%; margin-left:0px;">
      <el-row>
        <el-col :span="11">
          <el-form-item label="客户来源" prop="channel_code">
            <treeselect v-model="form.channel_code" :options="secondChannels" :flatten-search-results="true" :disable-branch-nodes="true" placeholder="请选择渠道" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="SKU类型" prop="sku_type">
            <el-select v-model="form.sku_type" filterable placeholder="SKU类型" class="input-costum" @change="changeSkuType">
              <el-option v-for="item in skus" :key="item.key" :label="item.key" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="宝贝描述" prop="goods_info">
            <el-select v-model="form.goods_info" filterable placeholder="宝贝描述" class="input-costum" @change="changeGoodsInfo">
              <el-option v-for="item in skuGoodsInfos" :key="item.key" :label="item.key" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="宝贝价格" prop="price">
            <el-select v-model="form.price" filterable placeholder="宝贝价格" class="input-costum">
              <el-option v-for="item in goodsInfoPrices" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="收件人" prop="consignee">
            <el-input v-model="form.consignee" placeholder="收件人" class="input-costum" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="手机号" class="input-costum" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="宝贝标题" prop="goods_title">
            <el-input v-model="form.goods_title" placeholder="宝贝标题" class="input-costum" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="外部采购编号" prop="external_procure_number">
            <el-input v-model="form.external_procure_number" placeholder="外部采购编号" class="input-costum" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="是否有代餐">
            <el-switch v-model="form.with_meal_powder" active-color="#13ce66" inactive-color="#ff4949" active-text="有代餐" inactive-text="无代餐" active-value="1" inactive-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="是否VIP">
            <el-switch v-model="form.is_vip" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" active-value="1" inactive-value="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="收货地址" prop="delivery_address">
            <el-input v-model="form.delivery_address" type="textarea" placeholder="收货地址" class="user-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="买家备注">
            <el-input v-model="form.comments" type="textarea" placeholder="买家备注" class="user-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="系统备注">
            <el-input v-model="form.memo" type="textarea" placeholder="系统备注" class="user-input" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确 认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    supThis: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false, 
      dialog: false,
      channelCodes: [],
      secondChannels: [],
      skus: [],
      skuGoodsInfos: [],
      goodsInfoPrices: [],
      form: {
        id: null,
        source: null,
        channel_code: null,
        phone: null,
        consignee: null,
        status: 'initial',
        sku_type: null,
        goods_title: null,
        goods_info: null,
        price: null,
        external_procure_number: '',
        with_meal_powder: '0',
        is_vip: '0',
        delivery_address: '',
        comments: '',
        memo: ''
      },
      formRules: {
        source: [
          { required: true, message: '请选择订单来源', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号必须为11位', trigger: 'blur' }
        ],
        consignee: [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' }
        ],
        sku_type: [
          { required: true, message: '请选择sku类型', trigger: 'change' }
        ],
        goods_title: [
          { required: true, message: '请输入宝贝标题', trigger: 'blur' }
        ],
        goods_info: [
          { required: true, message: '请选择宝贝描述', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请选择宝贝价格', trigger: 'change' }
        ],
        external_procure_number: [
          { required: true, message: '请输入外部编号', trigger: 'blur' }
        ],
        delivery_address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ]
      },
    }
  },
  mounted() {
    // this.initParams()
  },
  methods: {
    initParam() {
      this.$api.order.origin
        .params({
          params: { keys: ['sku_type_info_price'] }
        })
        .then(res => {
          this.skus = res.data.sku_type_info_price
        }).catch(err => {
          console.log(err)
        })

      this._getCascadeSecond()
    },
    cancel() {
      this.resetForm()
    },
    changeSkuType(val) {
      this.skuGoodsInfos = []
      this.goodsInfoPrices = []
      // 根据选择的服务，清空之前选中的数据
      // this.form = Object.assign({}, this.form, {goods_info: null, price: null})
      this.skus.forEach((item) => {
        if (item.key === val) {
          this.skuGoodsInfos = item.value
        }
      })
    },
    changeGoodsInfo(val) {
      this.goodsInfoPrices = []
      this.skuGoodsInfos.forEach((item) => {
        if (item.key === val) {
          this.goodsInfoPrices = item.value
        }
      })
    },
    _getCascadeSecond() {
      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        } else {
          console.log('error')
          return false
        }
      })
    },
    doAdd() {
      this.$api.order.origin
        .add({
          data: this.form
        })
        .then(res => {
          this.resetForm()
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.supThis.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    doEdit() {
      this.$api.order.origin
        .edit({
          data: this.form
        })
        .then(res => {
          this.resetForm()
          this.$notify({
            title: '修改成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.supThis.init()
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
    },
    generateExtraNum() {
      function timestampToTime(timestamp) {
        var date = new Date(timestamp)
        var Y = date.getFullYear() + ''
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + ''
        var D = date.getDate() + ''
        var h = date.getHours() + ''
        var m = date.getMinutes() + ''
        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
        return Y + M + D + h + m + s
      }
      return 'Q' + timestampToTime(Date.parse(new Date()))
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.channelCodes = []
      this.form = {
        id: '',
        delivery_name: '',
        channel_code: '',
        phone: '',
        order_type: '',
      }
    }
  }
}
</script>

<style scoped>

</style>
